今天來學習JSX，主要學習的內容為：

• 理解JSX是什麼
• 使用JSX的原因
• JSX的運作
• 如何使用JSX

JSX是什麼

在談JSX 前，先談談component

有一段時間，web的開發者分別將內容保存於HTML，設計於CSS而邏輯於JavaScript，然而隨著web有更高度的互動性，Javascript 開始也掌管HTML，因此在React 將渲染的邏輯以及markup放在一起，而這就是元件。

每一個React 的元件都等同於一個JavaScript的function，而當中可以包含一些markup，在React這樣子的markup是使用JSX語法擴充（syntax extension)來處理的。

即使在React使用的是JSX，二者關係似乎不可切割，但其實JSX和React是完全不同的東西，JSX是語法擴充（syntax extension)，而React是Javascript library。他們經常一起使用，但也可以分開使用。

為什麼使用JSX呢？

其中一個原因是可讀性高。我們比較看看以下的程式碼：

• pure JavaScript

  const element = React.createElement(
    "nav",
    { id: "main-nav" },
    React.createElement(
      "ul",
      null,
      React.createElement(
        "li",
        null,
        React.createElement(
          "a",
          { href: "/" },
          "Home"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          "a",
          { href: "/archives" },
          "Archives"
        )
      )
    )
  );
  

• 使用JSX

  // In JSX:
  const element = (
    <nav id="main-nav">
      <ul>
        <li>
          <a href="/">
            Home
          </a>
        </li>
        <li>
          <a href="/archives">
            Archives
          </a>
        </li>
      </ul>
    </nav>
  );
  

(程式碼出處：The Joy Of React)

JSX是不是看起來更易讀了呢？

JSX是如何運作的？

我們寫的JSX會被轉換為React.createElement而當我們的程式碼在使用者的瀏覽器運行時，所有的 JSX 都已經被處理掉，我們會得到的是一個巢狀的的 React.createElement 所調用的 JS 文件。

譬如這樣子：

const element = React.createElement(
  'p',
  { id: 'hello' },
  'Hello World!'
);

這個React元素會是這樣子的JavaScript Object

{
  type: "p",
  key: null,
  ref: null,
  props: {
    id: 'hello',
    children: 'Hello World!',
  }

前面簡單介紹了JSX的概念，接著我們來學習JSX在操作上有什麼規則。

如何使用JSX?

JSX的規則

JSX第一眼很像HTML，但如果我們直接將HTML的程式碼複製到React的component當中我們會得到以下的error訊息

（截圖自React官方文件）

會有這樣的結果是因為JSX的規則比起HTML更加地嚴苛，而且有更多的規則。

1. 返回單一根元素

在component當中返回多個元素時，需要將它們以一個父標籤（a single parent tag**.**）包裹起來。可以使用<div>來包裹或者也可以使用 <> 及 </> 來代替。

譬如這樣子：

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

但這樣子的作法會在HTML樹中添加一個多餘的**<div>**元素。

<> & </>這個叫做fragament，我們也可以使用fragment來製作

使用fragment：

<>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</>

Fragment不會在DOM中留下任何額外的痕跡。它能夠讓你在邏輯上將多個元素分組，同時不影響實際的HTML結構。

2. 確保所有的標籤都有對應的關閉標籤

除了我們熟悉的包裹型標籤（wrapping tags），如<li>oranges</li>也可以使用自閉合標籤（self-closing tags）<img />。

3. 幾乎大部分的東西都要使用駝峰命名法

JSX當中編寫的屬性會轉換成JavascriptObject的key，由於JavaScript它們的名稱不能包含破折號（-）或保留詞（如class）在React中，許多HTML和SVG屬性都以駝峰命名法（camelCase）來編寫。

以上是關於JSX的初步認識，明天會更近一步來學習JSX。

參考資料

1. React 官方文件 - Writing Markup with JSX
2. The Joy of React by Josh W Comeau - Understanding JSX